<template>
  <div class="header">
    <!-- <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link> -->
    <div class="box">
      <div class="left">
        <ul>
          <li v-for="(item, index) in routerList1" :key="index">
            <router-link class="span" :to="item.path">
              {{ item.name }}</router-link
            >
          </li>
        </ul>
      </div>
      <div class="logo">
        <img
          src="https://sysdocs.cn/showcase_sysdocs_pic/sysdocs_logo.jpg"
          alt="logo"
          class="logo"
        />
      </div>
      <div class="right">
        <ul>
          <li v-for="(item, index) in routerList2" :key="index">
            <router-link class="span" :to="item.path">
              {{ item.name }}</router-link
            >
          </li>
        </ul>
      </div>
      <div class="right">
        <el-input
          placeholder="搜索"
          clearable="true"
          size="mini"
          suffix-icon="el-icon-search"
          v-model="searchInput"
        >
        </el-input>
      </div>
      <!-- <li class="el-icon-user-solid"></li> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchInput: "",
      routerList1: [
        {
          name: "HOME",
          path: "/home",
          children: [
            {
              name: "子页面",
              path: "/otherpage",
            },
          ],
        },
        {
          name: "PROFILE",
          path: "/proflie",
        },
        {
          name: "RESULTS",
          path: "/results",
        },
        {
          name: "VIDEOS",
          path: "/videos",
        },
        {
          name: "PHOTOS",
          path: "/photos",
        },
        {
          name: "#OOTD",
          path: "/ootd",
        },
      ],
      routerList2: [
        {
          name: "EVENTS",
          path: "/events",
        },
        {
          name: "GOODS",
          path: "/goods",
        },
        {
          name: "FANSUB",
          path: "/fansub",
        },
        {
          name: "DOCS",
          path: "/docs",
        },
      ],
    };
  },
};
</script>

<style scoped>
.header {
  position: relative;
  top: 0px;
  left: 0px;
  height: 60px;
  width: 100%;
  box-shadow: -3px 1px 10px gray;
}
.box {
  position: absolute;
  display: flex;
  width: 80%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  justify-content: space-between;
  align-items: center;
  color: #3d60bb;
  font-size: 1vw;
}

.logo {
  height: 40px;
  width: auto;
}

.span {
  margin-right: 1vw;
  text-decoration: none;
}

.box ul {
  list-style: none;
}
.box li {
  display: inline-block;
}
.box li :hover {
  border-bottom: 3px solid #3d60bb;
}
</style>
